<!-- 修改個人信息頁面 -->
<template>
  <div class="basic-detail-page">
    <!-- 顶部导航栏 -->
    <div class="nav-header">
      <img src="../assets/icons/back.svg" class="back-icon" @click="goBack" />
      <span class="nav-title">个人设置</span>
    </div>

    <div class="settings-container">
      <ul class="settings-list">
        <SettingItem
          v-for="setting in settings"
          :key="setting.type"
          :icon="setting.icon"
          :title="setting.title"
          :arrowIcon="arrowIcon"
          :type="setting.type" 
          @click="editProfile(setting.type)"
        />
      </ul>

      <button class="logout-button" @click="logout">退出登录</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import SettingItem from '../components/SettingItem.vue'
import arrowIcon from '../assets/icons/back.svg'
import avatarIcon from '../assets/icons/EditAvatar.svg'
import usernameIcon from '../assets/icons/EditName.svg'
import passwordIcon from '../assets/icons/EditKeys.svg'
import addressIcon from '../assets/icons/EditAddress.svg'
import notesIcon from '../assets/icons/EditChatbot.svg'
import genderIcon from '../assets/icons/EditGender.svg'
import axios from 'axios'  // 添加 axios 导入

const router = useRouter()

const settings = ref([
  { type: 'avatar', title: '修改头像', icon: avatarIcon },
  { type: 'username', title: '修改用户名', icon: usernameIcon },
  { type: 'password', title: '修改密码', icon: passwordIcon },
  { type: 'address', title: '修改常用地址', icon: addressIcon },
  { type: 'notes', title: '默认备注设置', icon: notesIcon },
  { type: 'gender', title: '修改性别', icon: genderIcon }
])

const goBack = () => {
  router.push('/')
}

const editProfile = (setting) => {
  router.push(`/edit/${setting}`)
}

const logout = async () => {
  try {
    const currentUser = JSON.parse(localStorage.getItem('user'));
    const userId = currentUser ? currentUser.uid : null;
    const token = localStorage.getItem('token');

    if (!userId || !token) {
      alert('用户信息不完整，请重新登录');
      router.push('/login');
      return;
    }

    const response = await axios.post('/api/auth/logout',
      {
        uid: userId,
        token: token
      },
      {
        headers: {
          'Content-Type': 'application/json',
          'Authorization': token
        }
      }
    );

    if (response.data.code === 0) {
      // 清除本地存储的用户信息和token
      localStorage.removeItem('user');
      localStorage.removeItem('token');
      router.push('/');
    } else {
      throw new Error(response.data.message || '退出失败');
    }
  } catch (error) {
    console.error('退出登录失败:', error);
    alert(error.response?.data?.message || error.message || '退出失败');
    // 即使退出失败，也清除本地存储并跳转到登录页
    localStorage.removeItem('user');
    localStorage.removeItem('token');
    router.push('/login');
  }
}
</script>

<style scoped>
.basic-detail-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.nav-header {
  height: 61px;
  background: #ffffff;
  display: flex;
  align-items: center;
  padding: 0 10px;
  position: relative;
  z-index: 1;
}

.back-icon {
  width: 24px;
  height: 24px;
  cursor: pointer;
  margin-left: 5px;
  position: absolute;
  left: 10px;
}

.nav-title {
  flex: 1;
  text-align: center;
  font-size: 22px;
  font-weight: 500;
  font-family: "SourceHanFontBold";
  color: #333333;
}

.settings-container {
  padding: 20px;
  background-color: #f2f1f6;
  flex: 1;
}

.settings-list {
  border-radius: 10px;
  background-color: white;
  list-style-type: none;
  padding: 0;
  margin-top: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  font-family: "SourceHanFont";
  /* font-weight: normal; 添加这行确保使用普通字重 */
}

.logout-button {
  width: 100%;
  height: 50px;
  margin-top: 30px;
  background-color: #ff4d4f;
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.logout-button:hover {
  background-color: #ff7875;
  transform: translateY(-1px);
}
</style>